<template>
  <view class="page-wrapper goods-info">
    <div class="wrap" v-if="loaded">
      <div style="margin-bottom: 20rpx">
        <uni-swiper-dot
          class="uni-swiper-dot-box"
          :info="info.banner"
          :current="current"
          mode="dot"
          :dots-styles="dotsStyles"
          field="content"
        >
          <swiper circular class="home-swiper main-swiper" :current="current" @change="siwperChange">
            <swiper-item class="swiper-item" v-for="(item, index) in info.banner" :key="index">
              <div class="main-img">
                <img :src="item" mode="aspectFill" @click="previewImg(index)" class="img" alt="" />
              </div>
            </swiper-item>
          </swiper>
        </uni-swiper-dot>
      </div>
      <div class="title">
        {{ info.name }}
        <br />
        {{ info.enName }}
      </div>
      <div class="title" style="margin-top: 44rpx">¥ {{ vip ? roundNumber(info.price * 0.9, 2) : info.price }}</div>
      <div class="title" style="margin-bottom: 44rpx">库存 Stockpile {{ inventory }}</div>
      <div class="rich-text" style="font-size: 24rpx; line-height: 44rpx">
        <uv-parse :content="info.particulars" :selectable="true"></uv-parse>
      </div>
    </div>
    <div class="bottom-control-box">
      <div class="bottom-control-container">
        <div class="wrap">
          <div class="bottom-control-btn" :class="{ disabled: !loaded || inventory === 0 }" @click="toPurchase">
            选购 Purchase
          </div>
        </div>
        <bottom-safe-area></bottom-safe-area>
      </div>
      <div>
        <div style="height: 100rpx"></div>
        <bottom-safe-area></bottom-safe-area>
      </div>
    </div>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, watch, computed } from 'vue'
import { useStore } from 'vuex'
import { ossDomain } from '@/utils/oss'
const store = useStore()

import { onLoad, onShow } from '@dcloudio/uni-app'
import { proInfo } from '@/utils/api/goods'

import { roundNumber } from '@/utils/reg'

// 获取是不是vip
let vip = computed(() => {
  return store.getters['user/isVip']
})
onShow(function () {
  let userInfo = uni.getStorageSync('userInfo')
  vip.value = userInfo.vipCode ? userInfo.vipCode !== 'common' : false
})

// import { generateFakeProduct } from './mock'
const id = ref<string | null>(null)
const info = ref<any>({})
const loaded = ref<boolean>(false)
// 计算所有sku的库存
let inventory = computed(() => {
  let sum = 0
  info.value.skuVos.forEach((item) => {
    sum += item.inventory
  })
  return sum
})
const getData = async () => {
  console.log('请求详情')
  const res = await proInfo({ id: id.value })
  console.log('请求详情', res)
  if (res.code === 200) {
    loaded.value = true
    info.value = JSON.parse(JSON.stringify(res.data))
    if (res.data.bannerImg) {
      info.value.banner = res.data.bannerImg.split(',')
      info.value.banner = info.value.banner.map((item) => {
        return ossDomain + item
      })
      console.log('添加域名后的banner数据:', info.value.banner)
    }
  } else {
    console.log('获取商品信息失败:', res)
  }
}

let current = ref<number>(0)
const siwperChange = (e) => {
  current.value = e.detail.current
}
const dotsStyles = reactive({
  backgroundColor: '#D9D9D9',
  selectedBackgroundColor: '#535353',
  bottom: 0,
  border: '0px solid #000',
  selectedBorder: '0px solid #535353',
  width: 5,
  height: 5
})

const previewImg = (index) => {
  if (!info.value.banner.length || index < 0 || index >= info.value.banner.length) {
    return
  }
  uni.previewImage({
    urls: info.value.banner,
    current: info.value.banner[index]
  })
}

const toPurchase = () => {
  let tokenValue = uni.getStorageSync('tokenValue')
  if (tokenValue) {
    if (!loaded.value || info.value.skuVos.inventory === 0) {
      return
    }
    let params = {
      id: info.value.id,
      skuVos: info.value.skuVos,
      coverImg: info.value.coverImg,
      className: info.value.className,
      enName: info.value.enName,
      name: info.value.name,
      price: info.value.price
    }
    uni.navigateTo({
      url: '/pages/purchase/purchase?id=' + id.value
    })
  } else {
    uni.showModal({
      title: '提示',
      content: '请先登录',
      confirmText: '确定',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }
      }
    })
  }
}

onLoad((options) => {
  id.value = options.id
  getData()
})
</script>

<style lang="scss" scoped>
@import './goodsInfo.scss';
</style>
